<template>
  <jy-dialog :title="title" :visible.sync="open" width="1200px" append-to-body>
    <statement-preview :data-list="dataList" ref="statementPreview" @loadingChange="loadingChange" />
    <div slot="footer" class="dialog-footer print">
      <div>
        <el-progress v-show="printLoading" :percentage="exportPercentage"></el-progress>
      </div>
      <div>
        <el-button type="primary" :loading="printLoading" :disabled="printLoading" @click="onPrinter">打印</el-button>
        <el-button type="primary" :loading="printLoading" :disabled="printLoading" @click="onExportPDF">导出</el-button>
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </div>
  </jy-dialog>
</template>
<script>
import StatementPreview from "./StatementPreview.vue";
import { sortData } from "../utils";
import store from "@/store";
export default {
  name: "StatementSelectView",
  components: { StatementPreview },
  data() {
    return {
      title: "导出/打印 预览效果",
      open: false,
      dataList: [],
      printLoading: false,
      exportPercentage: 0, // 初始进度值
      status: "active" // 进度条状态
    };
  },
  created() {},
  mounted() {},
  methods: {
    init(dataList) {
      this.dataList = sortData(dataList);
      this.open = true;
      store.dispatch("reportForms/printEmptyChange", false);
    },

    // 打印
    onPrinter() {
      this.$refs.statementPreview.printer();
    },
    // 导出
    onExportPDF() {
      this.$refs.statementPreview.exportPDF();
    },
    loadingChange(value) {
      const { exportPercentage, printLoading } = value;
      this.printLoading = printLoading;
      this.exportPercentage = Number(exportPercentage) > 100 ? 100 : Number(exportPercentage);
    },
    // 取消按钮
    cancel() {
      this.open = false;
    }
  }
};
</script>
<style lang="scss" scoped>
  .print {
    display: flex;
    align-items: center;
    justify-content: space-between;

    ::v-deep {
      .el-progress-bar {
        width: 300px !important;
      }

      .el-progress-bar__outer {
        height: 15px !important;
      }

      .el-progress-bar__inner {
        background-color: #409eff;
        background-image: -webkit-linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.15) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.15) 50%,
          rgba(255, 255, 255, 0.15) 75%,
          transparent 75%,
          transparent
        );
        background-image: -o-linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.15) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.15) 50%,
          rgba(255, 255, 255, 0.15) 75%,
          transparent 75%,
          transparent
        );
        background-image: linear-gradient(
          45deg,
          rgba(255, 255, 255, 0.15) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.15) 50%,
          rgba(255, 255, 255, 0.15) 75%,
          transparent 75%,
          transparent
        );
        -webkit-background-size: 1rem 1rem;
        background-size: 1rem 1rem;
        animation: 2s linear infinite pbs;
        animation-iteration-count: 10;
      }

      @keyframes pbs {
        0% {
          background-position-x: 1rem;
        }
      }
    }
  }
</style>
